<template>
  <div class="online">
    <el-affix position="bottom" :offset="30">
      <el-popover placement="top-start" :width="400" trigger="click">
        <div class="head">自助客服</div>
        <el-scrollbar
          class="content"
          height="220px"
          max-height="220px"
          ref="scroll"
        >
          <div
            class="block"
            v-for="(item, index) in dialog"
            :key="index"
            :class="item.type"
          >
            <div v-if="item.type === 'to'">
              {{ item.text }}
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
            </div>
            <div v-else>
              <el-avatar
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              ></el-avatar>
              {{ item.text }}
            </div>
            <!-- <div> -->
            <!-- </div> -->
          </div>
        </el-scrollbar>
        <div>
          <el-input size="small" v-model="context" @keyup.enter="consult">
            <template #append>
              <div @click="consult">
                <i class="el-icon-search"></i>
              </div>
            </template>
          </el-input>
        </div>
        <template #reference>
          <el-button
            icon="el-icon-coffee-cup"
            circle
            @click="visible = true"
          ></el-button>
        </template>
      </el-popover>
    </el-affix>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue';
export default defineComponent({
  name: 'Online',
  setup() {
    const dialog = ref([
      { text: '你好，很高兴为您服务!', type: 'from' },
      { text: '请问有什么可以帮您的呢?', type: 'from' },
    ]);
    const context = ref('');
    const consult = () => {
      dialog.value.push({
        text: context.value,
        type: 'to',
      });
      dialog.value.push({
        text: '对不起！当前客服不在线，请稍后再试或电话咨询。',
        type: 'from',
      });
    };
    return {
      dialog,
      context,
      consult,
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/assets/css/config.scss';
.online {
  float: right;
  margin-right: 60px;
  width: 80px;
  height: 80px;
}
.el-button {
  width: 80px;
  height: 80px;
}
.head {
  height: 40px;
  font-size: 18px;
  margin-left: 5px;
}
.content {
  .block {
    width: 100%;
    min-width: 400px;
    min-height: 50px;
    max-height: 100px;
  }
  .from {
    min-width: 200px;
    div {
      float: left;
    }
  }
  .to {
    div {
      float: right;
    }
  }
}
</style>
